<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <div v-if="loading">Loading...</div>
    <div v-if="error">{{ error.message }}</div>
    <ul v-if="!loading && !error">
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { apiStore } from '../stores/apiStore.js'
import { onMounted } from 'vue'

const store = apiStore()

const fetchData = store.fetchData

onMounted(() => {
  fetchData()
})

const { data, loading, error } = storeToRefs(store)
// console.log(data)
</script>
